Skip Headers

Oracle® HTML DB User's Guide Release 1.6 Part Number B14303-02 |
Home | Book List | Contents | Index | Master Index | Feedback

Previous | Next
| View PDF

# 10 Adding Navigation

When you build an application you can include a number of different types of navigation controls, including navigation bars, tabs, menus, lists, and trees. This section describes how to implement navigation in your application.

Navigation controls are shared components. Once you create them, you can add them to any page within your application. You add a specific type of navigation control at the application level on the Shared Components page.

This section contains the following topics:

- Creating a Navigation Bar

- Creating Tabs

- Controlling Flow Using Branches

- Creating Menus

- Creating Lists

- Creating Trees

See Also: "Working with Shared Components" "Viewing a Page" "Controlling Page Layout and User Interface"

## Creating a Navigation Bar

Navigation bars (see Figure 10-1) offer an easy way for users to move between pages in an application. The location of a navigation bar depends upon the associated page template. A navigation bar icon enables you to display a link from an image or text. A navigation bar entry can be an image, an image with text beneath it, or text. You must supply navigation bar entry images and text. When you create a navigation bar entry, you can specify an image, text, a display sequence, or a URL.

Figure 10-1 Navigation Bar Entries

Description of the illustration nav_bar_2.gif

Navigation bars are different from other shared components in that you not need to reference them on a page by page basis. If your page template includes the `#NAVIGATION_BAR#` substitution string, the HTML DB engine automatically includes any defined navigation bars when it renders the page.

See Also: "Supported Page Template Substitution Strings" on using the `#NAVIGATION_BAR#` substitution string

### Creating a Navigation Bar Entry

Before you can add a navigation bar, you must create a navigation bar entry on the Navigation Bar page. You can access the Navigation Bar page from either the Page Definition or from the Shared Components page.

See Also: "Working with Shared Components"

To create a navigation bar entry referencing an icon:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

   The Page Definition appears.

2. Under Shared Components, scroll down to Navigation Bar.

3. Under Navigation Bar, click Create.

   The Create NavBar Entry Wizard appears.

4. Specify the following NavBar entry attributes:

   - Sequence

   - Alt Tag Text

   - Icon Image Name

   - Image Height and Image Width

   - Text

   Specify the target location.

5. If the target location is a URL:

   1. From Target is a, select URL.

   2. In URL Target, type a URL.

6. If the target location is a page:

   1. From Target is a, select Page in this application.

   2. In Page, specify the page number.

7. If the navigation bar entry will display conditionally, specify the appropriate conditional information and click Create.

To create a navigation bar entry without icons:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

   The Page Definition appears.

2. Under Shared Components, scroll down to Navigation Bar.

3. Under Navigation Bar, click Create.

   The Create NavBar Entry Wizard appears.

4. Specify the following icon attributes:

   - Sequence

   - Text

5. If the target location is a page:

   1. From Target is a, select Page in this application

   2. In Page, specify the page number

6. If the navigation bar entry will display conditionally, specify the appropriate conditional information and click Create.

### Managing Navigation Bar Entries

To manage navigation bar entries:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

2. Select the heading Navigation Bar.

   The Navigation Bar page appears.

3. On the Navigation Bar page you can:

   - View details about a specific entry by clicking the Edit icon

   - Access an editable summary view, by clicking Edit selected attributes.

   - View navigation bar entries that are subscribed to by clicking Subscriptions.

   - View a history of recently changed navigation bar entries by clicking History.

   - Create a new navigation bar entry, by clicking Create

## Creating Tabs

Tabs are an effective way to navigate users between pages of an application. You can create a tabbed application look by using parent tabs, standard tabs, and Oracle HTML DB lists.

Application Builder includes two different types of tabs:

- Standard tabs

- Parent tabs

An application having only one level of tabs uses a standard tab set. A standard tab set is associated with a specific page and page number. You can use standard tabs to link users to a specific page. A parent tab set functions as a container to hold a group of standard tabs. Parent tabs give users another level of navigation as well as a context (or sense of place) within the application. You can use parent tabs link users to a specific URL associated with a specific page.

Topics in this section include:

- About Template Support

- Using Tab Manager

- Editing Multiple Tabs at Once

- Accessing Tab Reports

Note: When running the Create Application Wizard, you have the option of creating an application with tabs. The following procedures assume you have already created an application that does not have any tabs.

See Also: "Creating an Application"

### About Template Support

Before you can create parent and standard tabs, you need to check that your default template has positions defined for both standard and parent tabs using the appropriate substitution strings. You also need to make sure you do not override this template at the page level.

See Also: "Application Template Defaults" for more information on setting a default page template at the application level "Primary Display Attributes" for more information on setting a template at the page level

### Using Tab Manager

You manage tab information using Tab Manager. You can access Tab Manager from the Shared Components page, or by clicking either the Parent Tabs or Standard Tabs heading on the Page Definition.

#### Accessing Tab Manager

To access Tab Manager from the Shared Components page:

1. Navigate to the Workspace home page.

2. From the Applications list, select an application.

3. On the Application Builder home page, click Shared Components.

4. Under Navigation, click Tabs.

   Tab Manager appears displaying a graphical representation of the tabs defined in your application.

5. To make another tab current, click the tab.

   Notice the two Add buttons. Use the Add button on the upper right side of the graphic to add Parent tabs. Use the Add button at the lower left side of the graphic to add standard tabs.

6. To add a new tab, click Add adjacent to the appropriate tab type.

   Think of parent tabs as a container to hold standard tabs. For example, in order to add two levels of tabs you first create a parent tab and then add standard tabs to it.

To access Tab Manager from the Page Definition:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

   The Page Definition appears.

2. Under Shared Components, select one of the following headings:

   - Parent Tabs

   - Standard Tabs

   Tab Manager appears displaying a graphical representation of the tabs defined in your application. The currently selected standard or parent tab is highlighted.

3. To make another tab current, click the tab.

   Notice the two Add buttons. Use the Add button on the upper right side of the graphic to add Parent tabs. Use the Add button at the lower left side of the graphic to add standard tabs.

4. To add a new tab, click Add adjacent to the appropriate tab type.

   Think of parent tabs as a container to hold standard tabs. For example, in order to add two levels of tabs you first create a parent tab and then add standard tabs to it.

#### Creating a New Tab from the Page Definition

To create a new tab from the Page Definition:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

2. Under Tabs, click the Create icon.

   Create Tab Wizard appears.

3. Follow the on-screen instructions.

### Editing Multiple Tabs at Once

You can edit multiple tabs at once by clicking Edit all standard tabs and Edit all parent tabs on the Tab Manager page.

To edit multiple tabs at once:

1. Navigate to Tab Manager. (See "Using Tab Manager".)

2. Click one of the following to edit tab attributes in a summary view:

   - Edit all standard tabs

   - Edit all parent tabs

### Accessing Tab Reports

Application Builder includes the following tab reports

- Standard Tab Utilization

- Standard and Parent Tab History

You can access these reports by clicking the appropriate button at the top of the Tab Manager page.

#### Standard Tab Utilization

Click Utilization to access the Standard Tab Utilization report. This report lists the standard tabs used in the current application.

#### Standard and Parent Tab History

Click History to view the Standard Tab History and Parent Tab History reports. These reports display a history of changes to tab attributes for the current application.

## Controlling Flow Using Branches

A branch is an instruction to link to a specific page, procedure, or URL. For example you can branch from page 1 to page 2 after page 1 is submitted.

Note: If a page has a select list and a submit button, it can submit itself. However, you must create a branch to call the page or the submit will fail.

You create a new branch by running the Create Branch Wizard and specifying Branch Point and Branch Type. The Branch Type defines the type of branch you are creating.

To create a branch:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

2. Under Branching, click the Create icon to run the Create Branch Wizard.

3. Select a Branch Point:

   - On Submit: Before Computation - Occurs before computations, validations, or processing. Use this option for a Cancel button.

   - On Submit: Before Validation - Occurs after computations, but before validations or processing. Typically not used. If a validation fails, page processing stops, a rollback is issued, and the page displays the error. Because of this default behavior, you do not need to create branches to accommodate validations. However, you might want to branch based on the result of a computation (for example, to the previous branch point).

   - On Submit: Before Processing - Occurs after computations and validations, but before processing. Use this option to branch based on a validated session state, but before performing any page processing.

   - On Submit: After Processing - Occurs after computations, validations, and processing. This option branches to a URL or page after performing computations, validations, and processing. When using this option, remember to sequence your branches if you have multiple branches for a given branch point.

   - On Load: Before Header - Occurs before a page rendered. This option displays another page instead of the current page or redirects the user to another URL or procedure.

4. Select a Branch Type.

   Depending upon the Branch Type, specify the following types of information on the pages that follows:

   - A page number of the page you wish to branch to

   - PL/SQL code

   - A URL address

5. Follow the on-screen instructions.

## Creating Menus

Menus provide users with hierarchical navigation. A menu is a hierarchical list of links that display using templates. You can display menus as a list of links, or as a breadcrumb path.

Topics in this section include:

- About Breadcrumb Menus

- Creating a Menu

- Editing Multiple Menu Names Simultaneously

- Accessing Menu Reports

See Also: "Creating a New Template" and "Menu Templates" for more information on changing menu display

### About Breadcrumb Menus

As shown in Figure 10-2, a breadcrumb style menu indicates where the user is within the application from a hierarchical perspective. In addition, users can click a specific page to instantly view it. You can include a breadcrumb menu that functions as second level of navigation and displays beneath the standard tabs at the top of each page.

Figure 10-2 Breadcrumb Style Menu

Description of the illustration menu.gif

### Creating a Menu

To add a menu to a page in your application you must:

- Create the menu by running the Create Menu Wizard.

- Add options to it

- Add the menu to a page by creating a menu region

To create a menu from the Shared Components page:

1. Navigate to the Workspace home page.

2. From the Applications list, select an application.

3. On the Application Builder home page, click Shared Components.

4. Under Navigation, click Menus.

   The Menus page appears.

5. To create a new menu, click Create.

6. Follow the on-screen instructions.

To create a menu from a Page Definition:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

2. Under Shared Components, scroll down to Menu and click Create.

   The Menus page appears.

3. To create a new menu, click Create.

4. Follow the on-screen instructions.

Once your menu has been created, you need to add options to it.

#### Adding Options to a Menu

To add options to a menu:

1. Navigate to the Menus page.

2. Select a menu and click Create Menu Option.

3. Under Menu Identification, specify the page on which this menu will be current

4. Under Menu Option, specify the following:

   - Sequence - Indicate the order in which menu options appear.

   - Parent Menu Option - Identify the parent of this menu entry.

   - Short Name - Specify the short name of this menu option (referenced in the menu template).

   - Long Name - Specify the long name of this menu option (referenced in the menu template).

5. Specify a target location.

   If the target location is a URL:

   1. From Target is a, select URL.

   2. In URL Target, type a URL.

   If the target location is a page:

   1. From Target is a, select Page in this Application

   2. In Page, specify the page number

6. To make the menu conditional:

   1. Make a selection from the Condition Type list.

   2. Enter an expression in the fields provided.

7. When you are finished defining menu attributes, click Create at the top of the page.

Repeat these procedures for each menu option you need to create.

#### Adding a Menu to a Page

Once you create a menu and a menu template, the next step is to add it a page by creating a region and specifying the region type as Menu.

See Also: "Creating a New Template" and "Menu Templates" for more information on changing menu display

To add a menu to a page:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

2. Under Regions, click Create.

   The Create Region Wizard appears.

3. Under Regions, click Create.

4. While running the Create Region Wizard:

   - Select Menu for the region type.

   - Enter a title.

   - Select a menu and menu template.

5. Click Create Menu Region.

Repeat these procedures for each page on which you would like to add a menu.

#### About Creating a Dynamic Menu

To give users a more exact context, you may include session state in a menu, making your menus dynamic. For example, suppose a page in your application displays a list of orders for a particular company and you want to include the following breadcrumb menu:

    Home > Orders > Orders for ACME Inc

In this example, `ACME` Inc not only indicates the page a user is on, but also the navigation path. The HTML DB engine stores the value of ACME Inc. in session state.

To create this type of dynamic menu, you must include a reference to a session state item in the menu's short name or long name, for example:

    &COMPANY_NAME.

### Editing Multiple Menu Names Simultaneously

You can edit multiple menu entries at once by clicking Edit multiple menu entries text at the top of the Menus page.

To edit menu entries at once:

1. Navigate to the Workspace home page.

2. From the Applications list, select an application.

3. On the Application Builder home page, click Shared Components.

4. Under Navigation, click Menus.

   The Menus page appears.

5. Click Edit multiple menu entries text.

6. Edit the appropriate menu name and click Apply Changes.

### Accessing Menu Reports

Application Builder includes the following menu reports:

- Menu Utilization Report

- Recent Menu Option Changes

You can access these reports by clicking the appropriate button at the top of the Menus page.

#### Menu Utilization Report

Click Utilization to access the Menu Utilization Report. This report lists menus by page. Click the page number to link to a specific page.

#### Recent Menu Option Changes

Click History to view the Recent Menu Option Changes report. This report lists recent changes to menus.

## Creating Lists

As shown in Figure 10-3, a list is a shared collection of links. You control the appearance of a list through list templates. Each list element has a display condition which enables you to control when it displays. You can define a list element to be either current or non current for a specific page. You further specify what current looks like using template attributes. You add a list to a page by creating a region and specifying the region type as List.

Figure 10-3 List

Description of the illustration list.gif

Topics in this section include:

- Creating a List

- Adding a List to a Page

- Editing Multiple List Entries Simultaneously

- Accessing List Reports

See Also: "Creating a New Template" and "List Templates" for more information on altering list display

### Creating a List

To add a list to a page in your application you must:

- Create the list by running the Create Lists Wizard.

- Add items to the list.

- Add the list to a page by creating a List region.

To create a list from the Shared Components page:

1. Navigate to the Workspace home page.

2. From the Applications list, select an application.

3. On the Application Builder home page, click Shared Components.

4. Under Navigation, click Lists.

   The Lists page appears.

5. To create a new list, click Create List.

6. Follow the on-screen instructions.

To create a list from a Page Definition:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

2. Under Shared Components, scroll down to Lists and click Create.

   The Create / Edit List Object page appears.

3. To create a new list, click Create.

4. Follow the on-screen instructions.

Once your list has been created, you need to add items to it.

#### Adding Items to a List

To add items to a list:

1. Navigate to the Lists page.

2. Select a list

3. Click Create List Entry to add entries to it.

   The List Entry Attributes page appears.

4. Under Label and Sequence, edit the appropriate attributes. In List Entry Label (required), enter the label text for this link.

   Use Target to specify a target location.

5. If the target location is a page:

   1. From Target Type, select Page in this Application.

   2. In Page, specify the target page number.

      To reset pagination for this page, select reset pagination for this page.

   3. In Request, specify the request to be used.

   4. In Clear Cache, specify the pages (that is, the page numbers) on which to clear cache. Specify multiple pages by listing the page numbers in a comma delimited list.

      You can set session state (that is, give a listed item a value) using the next two attributes:

   5. To set session state:

      - In Set these items, enter a comma delimited list of item names for which you would like to set session state.

      - In With these values, enter a comma delimited list of values for the items specified in the previous step.

        You can specify static values, or substitution syntax (for example, `&APP_ITEM_NAME.`). Note that item values passed to `f?p=` in the URL may not contain a colon (:). Additionally, item values may not contain commas unless you enclose the entire value in backslash characters (for example, `\1234,56\`).

   If the target location is a URL:

   1. From Target type, select URL.

   2. In URL Target, type a URL.

   If the target location is a page:

   1. From Target type, select Page in this Application.

   2. In Page, specify the page number.

6. If the target location is a URL:

   1. From Target type, select URL.

   2. In URL Target, type a URL.

7. To make the list entry conditional:

   1. Make a selection from the Condition Type list.

   2. Enter an expression in the fields provided.

8. When you are finished defining list attributes, click Create or Create and Create Another.

### Adding a List to a Page

Once you created a list, the next step is to add it a page by creating a region and specifying the region type as List.

See Also: "Creating a New Template""List Templates" for more information on altering list display

To add a list to a page:

1. Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)

2. Under Regions, click Create to run the Create Region Wizard.

3. Select List as the region type.

4. Specify region attributes:

   - Enter a title

   - Select a region template

   - Specify a display point

   - Specify a sequence

5. From List, select the list you want to add.

6. Click Create List Region.

Repeat these procedures for each page on which you would like to add a list.

### Editing Multiple List Entries Simultaneously

You can edit multiple list entries at once by clicking Grid Edit on the List Entries page.

To edit menu entries at once:

1. Navigate to the Workspace home page.

2. From the Applications list, select an application.

3. On the Application Builder home page, click Shared Components.

4. Under Navigation, click Lists.

   The Lists page appears.

5. Select a list name.

   The List Entries page appears.

6. Click Grid Edit.

7. Edit the appropriate items and click Apply Changes.

### Accessing List Reports

Application Builder includes the following list reports:

- Menu Utilization Report

- Recent Menu Option Changes

You can access these reports by clicking the appropriate button at the top of the Lists page.

#### List Utilization

Click Utilization to access the Lists Utilization report. This report displays all lists included in the current application. To edit list entries, select the list name. To view the pages on which the list appears, click the number in the Pages column.

#### Unused lists

Click Unused Lists to identify lists that are not used in the current application.

#### List Definition and List Entry History

Click History to view changes to list definitions and list entries by developer and date.

## Creating Trees

You can use a tree in your application to effectively communicate hierarchical or multiple level data.

To create a tree:

1. Navigate to the Workspace home page.

2. From the Applications list, select an application.

3. On the Application Builder home page, click Shared Components.

4. Under Navigation, click Trees.

   The Trees page appears.

5. To create a new tree, click Create.

6. Enter basic page information.

7. Enter a Tree Name and specify the Default Expanded Levels.

8. Specify how tabs should be implemented.

9. Identify tree attributes:

   1. Enter a tree name.

   2. Under Start Tree, specify how the starting tree node is created:

      - Based on new item with popup list of values - Creates a tree based on a new item with a popup list of values (LOV). Requires an LOV query that selects, displays, and returns values from a tree table. Use this method to select a different starting point each time you visit a page.

      - Based on a SQL Query - Creates a tree based on a SQL query. Requires a SQL query that selects a primary key from a tree table.

      - Static value - Creates a tree based on a static value.

      Keep in mind that the option Based on new item with popup list of values enables you to select a different starting point each time you visit a page. The starting point for the last two options always remains the same.

      You build a tree based on a table that contains the node data. This base table must have an ID (a primary key) and a parent ID that functions as a foreign key of the table. These IDs determine the number of tree levels.

10. Select a tree template.

11. Follow the on-screen instructions and specify the owner and name of the table on which the tree will be based.

12. Under Identify Query:

    1. In ID, enter the column you want to use as the ID.

    2. In Parent ID, enter the Parent ID.

    3. In Leaf Node Text, specify the text that should appear on the leaf nodes.

    4. Under Link Option, select Existing Application Item to make the leaf node text a link.

### Accessing Tree Reports

Application Builder includes the following tree reports:

- Tree Utilization

- Tree History

You can access these reports by clicking the appropriate button at the top of the Lists page.

#### Tree Utilization

Click Utilization to access the Tree Utilization report. This report displays all trees included in the current application. To edit a tree, select the tree name.

#### Tree History

Click History to view changes to trees by developer and date.